class Dialog {
    constructor(opt) {
        this.opt = opt;
        this.init();
    }

    init() {
        this.createEvent()
        this.bindEvent()
    }

    //创建
    createEvent() {
            this.parent = document.createElement('div');
            this.parent.classList.add('box');

            let { title, btns } = this.opt;

            this.parent.innerHTML = ` <h1>${title}</h1>
                                    <div class="btnArr">
                                        ${btns.map(item=>`<button class="btnA">${item}</button>`).join('')}
                                    </div>`
            document.body.appendChild(this.parent)

            
    }

    bindEvent(){
            let  btns = [...this.parent.querySelectorAll('button')]
            btns.forEach((item,ind)=>{
                item.onclick = this.opt[`cd${ind}`].bind(this);
            })         
    }

}

//继承
class DragDialog extends Dialog{
    constructor(opts){
        super(opts)
    }
}

new DragDialog({
    title: '你确定删除这条内容吗?',
    btns: ['确定', '取消'],
    cd0() {
        alert('删除完成')
        document.body.removeChild(this.parent);
    },
    cd1() {
        alert('删除取消')
    }
})